<template>
	<view>
		<navbar title="签到记录" :autoBack="true"></navbar>
		<view class="con">
			<view class="con__top">
				<view class="con__top__item">
					<view class="con__top__item__text">
						时间
					</view>
					<view class="u-flex u-flex-y-center" @click="clicksj(1)">
						<view class="con__top__item__name">
							{{curtime}}
						</view>
						<u-icon name="arrow-down-fill" color="#95969A" size="15rpx"></u-icon>
					</view>
				</view>
				<view class="con__top__item">
					<view class="con__top__item__text">
						事件
					</view>
					<view class="u-flex u-flex-y-center" @click="clicksj(2)">
						<view class="con__top__item__name">
							{{event}}
						</view>
						<u-icon name="arrow-down-fill" color="#95969A" size="15rpx"></u-icon>
					</view>
				</view>
				<view class="con__top__item">
					<view class="con__top__item__text">
						状态
					</view>
					<view class="u-flex u-flex-y-center" @click="clicksj(3)">
						<view class="con__top__item__name">
							{{curstatus}}
						</view>
						<u-icon name="arrow-down-fill" color="#95969A" size="15rpx"></u-icon>
					</view>
				</view>
			</view>
			<scroll-view scroll-y="true" class="scbox1">
				<view class="list">
					<view class="list__item" v-for="(item,index) in list" :key="index">
						<view class="u-flex u-flex-y-center u-flex-between">
							<view class="list__item__title">
								{{$u.timeFormat(item.signtime, 'yyyy年mm月')}}
							</view>
							<view class="list__item__st" v-if="item.status==1">
								拜访中
							</view>
							<view class="list__item__st" v-if="item.status==2">
								已拜访
							</view>
						</view>
						<view class="list__item__time">
							周{{weekDays[new Date(item.signtime).getDay()]}}
							{{$u.timeFormat(item.signtime, 'mm月dd日 hh:MM')}}
							<!-- 周六 11月9日 15:17 -->
						</view>
						<view class="u-flex u-flex-y-center u-flex-between" style="margin-bottom: 36rpx;">
							<view class="u-flex u-flex-y-center">
								<view class="list__item__label">
									客户
								</view>
								<view class="list__item__val">
									{{item.customerName}}
								</view>
							</view>
							<view class="list__item__val" v-if='item.status==1'>
								已签到，拜访中
							</view>
							<view class="list__item__val" v-if='item.status==2'>
								已签退
							</view>
						</view>
						<view class="u-flex u-flex-y-center" style="margin-bottom: 20rpx;">
							<view class="list__item__label">
								地点
							</view>
							<view class="list__item__val">
								{{item.address}}
							</view>
						</view>
						<view class="u-flex u-flex-items-end u-flex-between">
							<view class="u-flex u-flex-y-center">
								<view class="list__item__label">
									事件
								</view>
								<view class="list__item__val">
									{{item.event}}
								</view>
							</view>
							<u-button color="#3262FD" v-if='item.status==1' :loading="item.loading" text="签退"
								@click="clicksingout(item)"
								:customStyle='{width:"131rpx",height:"51rpx",margin:0,padding:0,borderRadius:"5rpx",fontSize:"24rpx"}'></u-button>
						</view>
						<view class="u-flex u-flex-y-center" style="margin-top: 20rpx;" v-if="item.distance!=null">
							<view class="list__item__label">
								偏差距离
							</view>
							<view class="list__item__val">
								{{item.distance}}m
							</view>
						</view>
					</view>
					
				</view>
			</scroll-view>
		</view>
		<!-- 事件选项 -->
		<u-picker :show="show" keyName='name' @close='show=false' @cancel='show=false' closeOnClickOverlay
			:columns="columns" :loading='loading' :defaultIndex='defaultIndex' @confirm='confirm'></u-picker>
		<u-picker :show="show1" @close='show1=false' @cancel='show1=false' closeOnClickOverlay :columns="columns1"
			:defaultIndex='defaultIndex1' @confirm='confirm1'></u-picker>
		<u-picker :show="show2" keyName='name' @close='show2=false' @cancel='show2=false' closeOnClickOverlay
			:columns="columns2" :defaultIndex='defaultIndex2' @confirm='confirm2'></u-picker>
		<!-- 时间范围 -->
		<u-calendar startText="开始日期" endText="结束日期" :show="show3" @close="show3 = false" @confirm="calendarConfirm"
			:defaultDate="calendar.defaultDate" :maxDate="calendar.maxDate" :minDate="calendar.minDate"
			:monthNum="calendar.monthNum"></u-calendar>
	</view>
</template>

<script>
	import sale from '@/api/_sale.js'
	import {
		wgs84togcj02
	} from "@/utils/toGCj.js"
	export default {
		data() {
			return {
				weekDays: ['日', '一', '二', '三', '四', '五', '六'],
				show: false,
				show1: false,
				show2: false,
				show3: false,
				value1: Number(new Date()),
				columns: [],
				loading: false,
				defaultIndex: [0],
				defaultIndex1: [0],
				defaultIndex2: [0],
				event: '全部事件',
				curtime: '全部时间',
				curstatus: '全部状态',
				curchecktype: null,
				columns2: [
					[{
							name: '全部状态',
							status: ''
						},
						{
							name: '未签退',
							status: '1'
						},
						{
							name: '已签退',
							status: '2'
						}
					]
				],
				columns1: [
					[
						'全部时间',
						'今天',
						'昨天',
						'本周',
						'上周',
						'本月',
						'自定义'
					]
				],
				calendar: {
					minDate: '',
					maxDate: '',
					defaultDate: '',
					monthNum: 13,
				},
				form: {
					"status": "",
					"startTime": "",
					"endTime": "",
					'event': ''
				},
				list: []
			};
		},
		methods: {
			async clicksingout(item) {
				let _this=this
				uni.getLocation({
					type: 'wgs84',
					success: (res) => {
						uni.hideLoading()
						let jwd = wgs84togcj02(res.longitude, res.latitude)
						sale.signOut({id:item.id,lat:jwd[1],lng:jwd[0]}).then(res=>{
							item.loading = false
							_this.$forceUpdate()
							if(res.data.code==1){
								uni.$u.toast('签退成功')
								_this.getlist()
							}
						})
					},
					fail: (err) => {
						uni.hideLoading()
						uni.showToast({
							title: '请开启手机定位',
							icon: 'none'
						});
					}
				});
				
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	isHighAccuracy: true,
				// 	geocode:true,
				// 	success: function(res) {
				// 		sale.signOut({id:item.id,lat:res.latitude,lng:res.longitude}).then(res=>{
				// 			item.loading = false
				// 			_this.$forceUpdate()
				// 			if(res.data.code==1){
				// 				uni.$u.toast('签退成功')
				// 				_this.getlist()
				// 			}
				// 		})
				// 	},
				// 	fail(err) {
				// 		uni.$u.toast('定位失败，请稍后重试')
				// 		uni.hideLoading()
				// 	},
				// 	complete(e) {
				// 	}
				// });
				
			},
			// lat1当前纬度, lng1当前经度, lat2目标纬度, lng2目标经度
			getDistance(lat1, lng1, lat2, lng2) {
				lat1 = lat1 || 0;
				lng1 = lng1 || 0;
				lat2 = lat2 || 0;
				lng2 = lng2 || 0;

				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				// 计算出来的是米数
				var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				// 返回计算好的距离（m单位）
				return distance;
			},
			async getlist() {
				let res = await sale.signList(this.form)
				if (res.data.code == 1) {
					this.list = res.data.data
					this.list.map(t => {
						t.loading = false
					})
				}
			},
			async clicksj(e) {
				if (e == 1) {
					this.show1 = true
				}
				if (e == 2) {
					this.show = true
					this.loading = true
					this.columns = []
					let res = await sale.eventList()
					if (res.data.code == 1) {
						this.loading = false
						this.columns.push([{
							name: '全部事件',
							id: 0
						}, ...res.data.data])
					}
				}
				if (e == 3) {
					this.show2 = true
				}
			},
			confirm(e) {
				this.defaultIndex = e.indexs
				this.event = e.value[0].name
				this.show = false
				if (this.event == '全部事件') {
					this.form.event = ''
				} else {
					this.form.event = e.value[0].name
				}
				this.getlist()
			},
			confirm1(e) {

				this.defaultIndex1 = e.indexs
				this.curtime = e.value[0]
				this.show1 = false
				if (e.value[0] == '自定义') {
					this.chooseTimed()
					this.show3 = true
				} else {
					let starttime = ''
					let endtime = ''
					let toData = new Date(new Date().toLocaleDateString()).getTime()
					const MillisecondsADay = 24 * 60 * 60
					const timestamp = Math.floor(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000)
					const weekDay = new Date().getDay() === 0 ? (7 - 1) : (new Date().getDay() - 1)
					const weekTimeStamp = timestamp - MillisecondsADay * weekDay
					if (this.curtime == '今天') {
						starttime = uni.$u.timeFormat(toData, 'yyyy-mm-dd') + ' 00:00:00'
						endtime = uni.$u.timeFormat(toData, 'yyyy-mm-dd') + ' 23:59:59'
					}
					if (this.curtime == '昨天') {
						starttime = uni.$u.timeFormat(toData - 3600 * 24 * 1000, 'yyyy-mm-dd') + ' 00:00:00'
						endtime = uni.$u.timeFormat(toData - 3600 * 24 * 1000, 'yyyy-mm-dd') + ' 23:59:59'
					}
					if (this.curtime == '本周') {
						starttime = uni.$u.timeFormat(weekTimeStamp, 'yyyy-mm-dd hh:MM:ss')
						endtime = uni.$u.timeFormat(weekTimeStamp, 'yyyy-mm-dd') + ' 23:59:59'
					}
					if (this.curtime == '上周') {
						//  上周开始时间戳
						const lastWeekStart = weekTimeStamp - MillisecondsADay * 7
						//  上周结束时间戳
						const lastWeekEnd = weekTimeStamp - 1
						// return [lastWeekStart, lastWeekEnd]
						starttime = uni.$u.timeFormat(lastWeekStart, 'yyyy-mm-dd hh:MM:ss')
						endtime = uni.$u.timeFormat(lastWeekEnd, 'yyyy-mm-dd hh:MM:ss')
					}
					if (this.curtime == '本月') {
						const date = new Date()
						date.setDate(1)
						date.setHours(0, 0, 0, 0)
						const timeStamp = date.getTime() / 1000
						starttime = uni.$u.timeFormat(timeStamp, 'yyyy-mm-dd hh:MM:ss')
						endtime = uni.$u.timeFormat(toData, 'yyyy-mm-dd') + ' 23:59:59'
					}
					this.form.startTime = new Date(starttime).getTime() / 1000
					this.form.endTime = new Date(endtime).getTime() / 1000
					if (this.curtime == '全部时间') {
						this.form.endTime = ''
						this.form.startTime = ''
					}
					this.getlist()
				}


			},
			confirm2(e) {
				this.defaultIndex2 = e.indexs
				this.curstatus = e.value[0].name
				this.form.status = e.value[0].status
				this.getlist()
				this.show2 = false
			},
			calendarConfirm(e) {
				console.log(e)
				this.form.startTime = new Date(e.starttime + ' 00:00:00').getTime() / 1000
				this.form.endTime = new Date(e.endtime + ' 23:59:59').getTime() / 1000
				this.getlist()
				this.show3 = false
			},
			// 设置默认日期，最大值为今天，最小值为去年今天
			chooseTimed() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (month <= 9) {
					month = '0' + month;
				}
				if (day <= 9) {
					day = '0' + day;
				}
				let minyear = year - 2;
				this.calendar.minDate = minyear + '-' + month + '-' + day;
				this.calendar.maxDate = year + '-' + month + '-' + day;
				this.calendar.defaultDate = year + '-' + month + '-' + day;
			},
		},
		onLoad() {
			this.getlist()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}

	.scbox1 {
		height: calc(100vh - var(--status-bar-height) - 44px - 20rpx - 30rpx - 164rpx - 30rpx);
	}

	.con {
		padding: 20rpx 30rpx 40rpx;

		&__top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 30rpx 0;
			margin-bottom: 30rpx;
			height: 164rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 33.33%;

				&__text {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #686769;
					line-height: 24rpx;
					margin-bottom: 23rpx;
				}

				&__name {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #1E1E1E;
					line-height: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.list {

		&__item {
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
			padding: 30rpx 30rpx 48rpx 34rpx;

			&__title {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #6D6D6D;
				line-height: 26rpx;
			}

			&__st {
				background: #F8F8F8;
				padding: 0 18rpx;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #6D6D6D;
				line-height: 50rpx;

			}

			&__time {
				font-family: PingFang SC;
				font-weight: 800;
				font-size: 30rpx;
				color: #010101;
				line-height: 30rpx;
				margin: 29rpx 0 31rpx;
			}

			&__label {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #78797E;
				line-height: 26rpx;
				width: 120rpx;
			}

			&__val {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 26rpx;
				color: #010101;
				line-height: 26rpx;
			}
		}
	}
</style>